<template>
  <view style="background-color: #f7f7f7;">
    <view class="top">
      <view class="back-btn" @click="backPage">
        <view class="back-icon"></view>
      </view>
      
      <view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="edit">注册</view>
      <view style="text-align: center; font-size: 35rpx; color: #fff;" v-if="!edit">商户资料</view>
      
      <view class="card">
        <view class="input_line">
          <text>优惠期名称</text>
          <input class="input" type="text" v-model="coupon.name" placeholder="请输入优惠期名称" />
        </view>
        
        <!-- #ifdef H5 -->
        <view class="input_line">
          <text>优惠券类型</text>
          <radio-group v-model="coupon.type" @change="typeChange">
            <label v-for="(item, index) in radioItems" :key="index" style="margin-left: 40rpx;">
              {{item.label}}
              <radio :value="item.value" />
            </label>
          </radio-group>
        </view>
        <!-- #endif -->
        
        <!-- 折扣券输入项 -->
        <view v-if="coupon.type === '2'" class="input_line">
          <text>折扣力度</text>
          <input class="input" type="number" placeholder="例如8,即8折" v-model.number="coupon.discount" />
          <text style="color: #999; margin-left: 10rpx;">范围: 1-9</text>
        </view>
        
        <!-- 满减券输入项 -->
        <view v-else>
          <view class="input_line">
            <text>触发金额</text>
            <input class="input" type="number" placeholder="例如满100,200" v-model.number="coupon.triggerMoney" />
          </view>
          <view class="input_line">
            <text>优惠金额</text>
            <input class="input" type="number" placeholder="20,30" v-model.number="coupon.preferentialMoney" />
          </view>
        </view>
        
        <view class="input_line">
          <text>发放开始时间</text>
          <picker mode="date" :value="coupon.start" start="2023-01-01" end="2030-12-31" @change="onStartDateChange">
            <view class="input" style="color: {{coupon.start ? '#333' : '#999'}}">
              {{coupon.start || '请选择发放开始时间'}}
            </view>
          </picker>
        </view>
        
        <view class="input_line">
          <text>发放结束时间</text>
          <picker mode="date" :value="coupon.end" start="2023-01-01" end="2030-12-31" @change="onEndDateChange">
            <view class="input" style="color: {{coupon.end ? '#333' : '#999'}}">
              {{coupon.end || '请选择发放结束时间'}}
            </view>
          </picker>
        </view>
        
        <view class="input_line">
          <text>使用开始时间</text>
          <picker mode="date" :value="coupon.expirationStart" start="2023-01-01" end="2030-12-31" @change="onExpirationStartChange">
            <view class="input" style="color: {{coupon.expirationStart ? '#333' : '#999'}}">
              {{coupon.expirationStart || '请选择使用开始时间'}}
            </view>
          </picker>
        </view>
        
        <view class="input_line">
          <text>使用结束时间</text>
          <picker mode="date" :value="coupon.expirationEnd" start="2023-01-01" end="2030-12-31" @change="onExpirationEndChange">
            <view class="input" style="color: {{coupon.expirationEnd ? '#333' : '#999'}}">
              {{coupon.expirationEnd || '请选择使用结束时间'}}
            </view>
          </picker>
        </view>
        
        <view class="input_line">
          <text>投放数量</text>
          <input class="input_s" type="number" v-model.number="coupon.num" placeholder="请输入投放数量" />张
        </view>
      </view>
    </view>
    
    <view style="height: 750rpx;"></view>
    
    <button @click="submitCoupon" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white;">
      确认投放
    </button>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import request from '@/utils/request.js';

// 响应式数据
const edit = ref(false); // 控制标题显示

const coupon = reactive({
  name: '',
  type: '1', // 默认满减券
  discount: '',
  triggerMoney: '',
  preferentialMoney: '',
  start: '',
  end: '',
  expirationStart: '',
  expirationEnd: '',
  num: '',
  pnum: ''
});

const radioItems = ref([
  { label: '满减券', value: '1' },
  { label: '折扣券', value: '2' }
]);

// 返回上一页
const backPage = () => {
  uni.navigateBack();
};

// 优惠券类型切换
const typeChange = (event) => {
  coupon.type = event.detail.value;
  
  // 清空非当前类型的字段
  if (event.detail.value === '1') {
    coupon.discount = '';
  } else {
    coupon.triggerMoney = '';
    coupon.preferentialMoney = '';
  }
};

// 日期选择事件
const onStartDateChange = (e) => {
  const newStart = e.detail.value;
  if (coupon.end && newStart >= coupon.end) {
    uni.showToast({ title: '发放开始时间必须小于发放结束时间', icon: 'none' });
    return;
  }
  if (coupon.expirationStart && newStart >= coupon.expirationStart) {
    uni.showToast({ title: '发放开始时间必须小于使用开始时间', icon: 'none' });
    return;
  }
  coupon.start = newStart;
};

const onEndDateChange = (e) => {
  const newEnd = e.detail.value;
  if (coupon.start && newEnd <= coupon.start) {
    uni.showToast({ title: '发放结束时间必须大于发放开始时间', icon: 'none' });
    return;
  }
  if (coupon.expirationEnd && newEnd >= coupon.expirationEnd) {
    uni.showToast({ title: '发放结束时间必须小于使用结束时间', icon: 'none' });
    return;
  }
  coupon.end = newEnd;
};

const onExpirationStartChange = (e) => {
  const newExpStart = e.detail.value;
  if (coupon.start && newExpStart <= coupon.start) {
    uni.showToast({ title: '使用开始时间必须大于发放开始时间', icon: 'none' });
    return;
  }
  if (coupon.expirationEnd && newExpStart >= coupon.expirationEnd) {
    uni.showToast({ title: '使用开始时间必须小于使用结束时间', icon: 'none' });
    return;
  }
  coupon.expirationStart = newExpStart;
};

const onExpirationEndChange = (e) => {
  const newExpEnd = e.detail.value;
  if (coupon.expirationStart && newExpEnd <= coupon.expirationStart) {
    uni.showToast({ title: '使用结束时间必须大于使用开始时间', icon: 'none' });
    return;
  }
  if (coupon.end && newExpEnd <= coupon.end) {
    uni.showToast({ title: '使用结束时间必须大于发放结束时间', icon: 'none' });
    return;
  }
  coupon.expirationEnd = newExpEnd;
};

// 表单验证
const validateForm = () => {
  if (!coupon.name) {
    uni.showToast({ title: '请输入优惠期名称', icon: 'none' });
    return false;
  }

  // 验证时间关系
  if (!coupon.start || !coupon.end || !coupon.expirationStart || !coupon.expirationEnd) {
    uni.showToast({ title: '请填写完整的时间信息', icon: 'none' });
    return false;
  }

  if (coupon.start >= coupon.end) {
    uni.showToast({ title: '发放开始时间必须小于发放结束时间', icon: 'none' });
    return false;
  }

  if (coupon.start >= coupon.expirationStart) {
    uni.showToast({ title: '发放开始时间必须小于使用开始时间', icon: 'none' });
    return false;
  }

  if (coupon.end >= coupon.expirationEnd) {
    uni.showToast({ title: '发放结束时间必须小于使用结束时间', icon: 'none' });
    return false;
  }

  if (coupon.expirationStart >= coupon.expirationEnd) {
    uni.showToast({ title: '使用开始时间必须小于使用结束时间', icon: 'none' });
    return false;
  }
  
  if (coupon.type === '1') {
    // 满减券验证
    if (!coupon.triggerMoney || !coupon.preferentialMoney) {
      uni.showToast({ title: '请填写触发金额和优惠金额', icon: 'none' });
      return false;
    }
    
    if (parseFloat(coupon.triggerMoney) <= 0 || parseFloat(coupon.preferentialMoney) <= 0) {
      uni.showToast({ title: '触发金额和优惠金额必须大于0', icon: 'none' });
      return false;
    }
    
    if (parseFloat(coupon.preferentialMoney) >= parseFloat(coupon.triggerMoney)) {
      uni.showToast({ title: '优惠金额必须小于触发金额', icon: 'none' });
      return false;
    }
  } else {
    // 折扣券验证
    if (!coupon.discount) {
      uni.showToast({ title: '请填写折扣力度', icon: 'none' });
      return false;
    }
    
    const discountValue = parseFloat(coupon.discount);
    if (discountValue <= 0 || discountValue >= 10) {
      uni.showToast({ title: '折扣力度必须在1-9之间', icon: 'none' });
      return false;
    }
  }
  return true;
};

// 提交优惠券
const submitCoupon = () => {
  if (!validateForm()) return;
  
  // 构建提交数据
  const submitData = {
    name: coupon.name,
    type: parseInt(coupon.type),
    discount: coupon.type === '2' ? parseFloat(coupon.discount) : null,
    triggerMoney: coupon.type === '1' ? parseFloat(coupon.triggerMoney) : null,
    preferentialMoney: coupon.type === '1' ? parseFloat(coupon.preferentialMoney) : null,
    start: coupon.start,
    end: coupon.end,
    expirationStart: coupon.expirationStart,
    expirationEnd: coupon.expirationEnd,
    num: parseInt(coupon.num),
  };
  
  // 提交请求
  request({
    url: 'xsc/coupon',
    method: 'POST',
    data: submitData,
    success(res) {
      if (res.data && res.data.code === 200) {
        uni.showToast({ title: '优惠券创建成功', icon: 'success' });
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/index/kaquan/kaquan' // 实际路由地址
          });
        }, 1500);
      } else {
        uni.showToast({ title: res.data?.msg || '创建失败', icon: 'none' });
      }
    },
    fail(err) {
      console.error('请求失败:', err);
      uni.showToast({ title: '网络请求失败', icon: 'none' });
    }
  });
};
</script>

<style scoped>
@import "@/common/app.css";

.card {
  border-radius: 20px;
  background-color: #fff;
  margin: 30rpx;
  padding: 30rpx 20rpx;
}

.input_line {
  font-weight: 500;
  margin: 30rpx 10rpx;
  padding-left: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input {
  border: 1px solid gray;
  padding: 10rpx 15rpx;
  border-radius: 20px;
  font-size: 20rpx;
  font-weight: 600;
  flex: 1;
  margin-left: 20rpx;
}

.input_s {
  border: 1px solid gray;
  padding: 10rpx 15rpx;
  margin-left: 75rpx;
  border-radius: 20px;
  font-size: 20rpx;
  font-weight: 600;
  width: 150rpx;
}

.big_title {
  margin-left: 20rpx;
  font-weight: 600;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.plus-icon {
  font-size: 40px;
  color: #ccc;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 12px;
  color: #999;
}

.dis_count {
  text-align: end;
  margin-right: 50rpx;
}

.back-btn {
  margin-left: 20rpx;
  width: 50rpx;
  height: 50rpx;
  position: relative;
}

.back-icon {
  width: 30px;
  height: 30px;
}

.back-icon::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  top: 80rpx;
  left: 47rpx;
  transform: translate(-50%, -50%);
}

.back-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  top: 70rpx;
  left: 30rpx;
}

/* 日期选择器样式优化 */
picker view {
  border: 1px solid gray;
  padding: 10rpx 15rpx;
  border-radius: 20px;
  font-size: 20rpx;
  font-weight: 600;
  flex: 1;
  margin-left: 20rpx;
  text-align: left;
}
</style>